<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #container {
            margin: 100px auto;
            position: relative;
            width: 400px;
            height: 400px;
            border: 10px solid black;
        }

        #imgbox {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #imgbox img {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        #imgbox img:nth-child(1) {
            opacity: 1;
        }

        #doubox {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            width: 150px;
            height: 30px;
            /* background-color: rgba(135, 207, 235, 0.416);             */
            border-radius: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 999;
        }

        #doubox li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: pink;
        }

        #doubox li:nth-child(1) {
            background-color: red;
        }

        #leftArrow {
            left: 0px;
        }

        #rightArrow {
            right: 0px;
        }

        .arrow {
            position: absolute;
            width: 50px;
            height: 40px;
            font-size: 30px;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            text-align: center;
            color: white;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <body>
        <div id="container">
            <div id="imgbox">
                <img src="../images/01.png">
                <img src="../images/02.png">
                <img src="../images/617230ce8e9f09088e0d2137_raw.gif">
                <img src="../images/617230cf8e9f09088e0d213e_raw.gif">
                <img src="../images/C3822DCDD48841026EAEB1AB954B2F86.png">
                <img src="../images/617230ce8e9f09088e0d213c_1024.jpg">
            </div>
            <ul id="doubox">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="leftArrow" class="arrow"> &lt; </div>
            <div id="rightArrow" class="arrow"> &gt; </div>
        </div>
        <script src="../../js/tools.js"></script>
        <script>
            let currIndex = 0
            let myTimer
            let imgBox = document.querySelector('#imgbox')
            let imgDoms = document.querySelectorAll('#imgbox img')
            let liDoms = document.querySelectorAll('#doubox li')

            window.onload = function () {

                autoplay()
                for (let i = 0; i < liDoms.length; i++) {
                    liDoms[i].onclick = function () {
                        goImg(i)
                    }
                }
                // 3、鼠标移入 停止播放
                let container = document.getElementById("container");
                container.onmouseenter = pause;
                // 4、鼠标离开 继续播放
                container.onmouseleave = function(){
                    autoplay()
                    console.log('我出来了');
                }

                let leftArrow = document.getElementById("leftArrow");
                leftArrow.onclick = function () {
                    goImg(currIndex - 1)
                }

                let rightArrow = document.getElementById('rightArrow')
                rightArrow.onclick = function () {
                    goImg(currIndex + 1)
                }
            }



            function autoplay() {
                myTimer = setInterval(function () {
                    goImg(currIndex + 1)
                }, 2000)
            }

            function goImg(index) {

                let preIndex = currIndex
                currIndex = index
                if (currIndex > 5) {
                    currIndex = 0
                } else if (currIndex < 0) {
                    currIndex = 5
                }
                // imgDoms[preIndex].style.zIndex=1
                // imgDoms[currIndex].style.zIndex=2
                fadeInOut(imgDoms[currIndex], imgDoms[preIndex], 1000)

                liDoms[preIndex].style.backgroundColor = 'pink'
                liDoms[currIndex].style.backgroundColor = 'red'
            }
            function pause() {
                window.clearInterval(myTimer)
                console.log('我进来了');
            }
        </script>
    </body>

</html>